<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>移动端手势密码组件</title>

    <style type="text/css">
        html,
        body,
        div,
        p {
            margin: 0;
            padding: 0;
        }
        
        #hea-com {
            height: 40px;
            padding: 5px 20px 0;
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: yellow;
        }
        
        #hea-com>span:last-of-type {
            opacity: 0;
        }
        
        .mui-locker {
            margin: 35px auto;
            display: block;
        }
        
        .avatar {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 20px;
        }
        
        .notice {
            text-align: center;
            font-size: 15px;
            font-weight: 100;
        }
    </style>
</head>

<body>
    <div id="hea-com">
        <span @click='close'>取消</span>
        <span>手势密码</span>
        <span>2</span>
    </div>
    <div class='avatar'>
        <img src="./img/a.png" width="80px" height="80px">
    </div>
    <h1 class='notice'>绘制你的图案</h1>
    <div class="mui-locker" data-locker-width='320' data-locker-height='320' data-locker-options='{"ringColor":"#7bdcf0","fillColor":"#ffffff","pointColor":"#7bdcf0","lineColor":"#7bdcf0"}'>
    </div>
    <script src="js/mui.min.js "></script>
    <script src="js/mui.locker.js"></script>
    <script type="text/javascript">
        //锁屏设置
        (function($, doc) {
            $.plusReady(function() {
				var time=1;
				mui.back = function(){
					if(time){
						time=0;
						plus.nativeUI.toast('再按一次退出');
						setTimeout(function(){
							time=1;
						},2000);
					}else{
						var el=plus.webview.all();
						for(var i=0;i<el.length;i++){
							el[i].close();
						}
					}
				};
				
                var locker = doc.querySelector('.mui-locker');
                var notice = doc.querySelector('.notice');
				var input=localStorage.getItem('shouPassword');
				var curr=plus.webview.currentWebview();
				var count=5;
                var record = [];
                locker.addEventListener('done', function(event) {
                    var rs = event.detail;
                    if (rs.points.length < 4||rs.points.join('')!=input) {
                        //没有连接到4个点,或者密码错误
						if(count-- == 1){
							localStorage.setItem('shouPassword','');
							localStorage.setItem('user','');
							plus.webview.open('login.html', 'login',{},'slide-in-right');
							curr.hide();
							setTimeout(function(){
								curr.close();
							},1000);
						}
                        notice.innerHTML = '密码错误，您还可以输入'+count+'次';
                        notice.style.color = 'red';
                        return;
                    }else{
						//输入正确
						plus.webview.getLaunchWebview().show();
						curr.hide();
						setTimeout(function(){
							curr.close();
						},1000);
					}
                }, false);
            });
        }(mui, document));
    </script>
</body>

</html>